<template>
    <div id="login">
        <div class="top_wrap">
            <div class="img_Box">
                <img src="../../assets/images/login_back.png" />
            </div>
            <div class="centent_box">
<!--                <div class="title">-->
<!--                    <img src="../../assets/images/titi.png" alt="">-->
<!--                </div>-->
                <!--                <div class="li_imgs">-->
                <!--                    <div style="color: #D7DFE8">试运营(暂时免费)</div>-->
                <!--                </div>-->
                <div class="li_imgs">
                    <img src="../../assets/images/login_l.png" alt="">
                </div>
                <div class="inputwrap">
                    <el-input clearable prefix-icon="el-icon-user" type="text" class="ipt-cell"
                        placeholder="请输入账号" v-model="account" >
                    </el-input>

                    <el-input  clearable show-password prefix-icon="el-icon-lock" type="password"
                        class="ipt-cell" placeholder="请输入密码" v-model="password">
                    </el-input>
                    <div class="remember">
                        <div class="rememberwrap">
                            <input type="checkbox" name="remember" id="" value=""  v-model="remember" />
                            <span>记住我</span>
                        </div>
                        <!-- <span class="forgetpwd" @click="retrievepwd()">忘记密码</span> -->
                    </div>
                    <!-- <button @click="submitForm()">登陆
                    </button> -->
                    <el-button type="warning" :loading="submitLoading" @click="submitForm()">登陆</el-button>
                </div>
                <div class="footer">
                    <p>Copyright © 2014 优合一众 - 渝ICP备14004187号-9 | www.youheone.com版权所有</p>
                </div>
                <div class="apply-box">
                    <div class="apply-hint">合伙人申请</div>
                    <div class="apply-icon" @click="registerFun()">
                        <img src="../../../static/images/login-apply-partner1.png">
                        <span>去申请</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 小黑窗 -->
        <div class="modelwrap">
            <p>{{modelmsg}}</p>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'login',
        data() {
            return {
                account: '', // 账号
                password: '', // 密码
                remember: '', // 是否记住我
                modelmsg: '', // 弹窗提示
                submitLoading: false,
            }
        },
        methods: {
            // 路由
            openindex() {
                this.$router.push({
                    path: '/index'
                });
            },
            //注册
            registerFun(){
                this.$router.push({
                    path: '/register'
                });
            },
            // 登陆提交
            submitForm: function () {
                var that = this;
                var account = that.account;
                var password = that.password;
                var remember = that.remember;
                // 判断参数是否为空
                if (account == '') {
                    this.modelmsg = "账号不能为空";
                    $('.modelwrap').fadeIn().delay(1500).fadeOut();
                    return false;
                } else if (password == '') {
                    this.modelmsg = "密码不能为空";
                    $('.modelwrap').fadeIn().delay(1500).fadeOut();
                    return false;
                }
                // 判断是否选中记住我 ，1：选中，0：未选中
                if (remember == true) {
                    remember = 1;
                } else {
                    remember = 0;
                }
                // ajax请求
                this.submitLoading = true;
                that.$post({
                    url: 'Partner/User/dologin',
                    data: { account: account, password: password, remember: remember },
                    success: (data) => {
                        this.submitLoading = false;
                        if (data.code == 200) {
                            locache.set('token', data.data);
                            locache.set('userName', account);
                            localStorage.setItem('username', account);
                            this.modelmsg = data.message;
                            //$('.modelwrap').fadeIn().delay(1500).fadeOut();
                            // 跳转首页
                            this.$router.push({ path: '/home' })
                        } else {
                            this.modelmsg = data.message;
                            $('.modelwrap').fadeIn().delay(1500).fadeOut();
                        }
                    },error:e=>{
                        this.submitLoading = false;
                    }
                })
            },

            // 忘记密码
            retrievepwd: function () {
                // 跳转页面
                this.$router.push({ path: '/retrievepwd' })
            },
            //获取屏幕高度
            getHeight() {
                var newHeight = $(window).height();
                $('.img_Box').css("height", newHeight + 'px');

            },
            autoLogin: function () {
                var that = this;
                var token = that.$route.query.token;
                var account = that.$route.query.account;
                if (token != null && account != null) {
                    locache.set('token', token);
                    locache.set('userName', account);
                    localStorage.setItem('username', account);
                    that.modelmsg = '快速登录中...';
                    $('.modelwrap').fadeIn().delay(2000).fadeOut();
                    setTimeout(function () {
                        that.$router.push({ path: '/home' });
                    }, 2000)
                }
            },

        },
        mounted() {
            //this.getHeight();
            //   console.log(this.$route.query.token);
            this.autoLogin();
        },
        created() {
        }
    }

</script>
<style>
    body {
        margin: 0;
    }

    #login .top_wrap {
        width: 100%;
        height: 100vh;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .top_wrap .img_Box {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 11;
    }

    .img_Box>img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .centent_box {
        position: relative;
        top: 0px;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #login .centent_box {
        width: 650px;
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*padding:50px 120px;*/
    }

    .centent_box .title {
        position: absolute;
        top: -10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .centent_box .title img {
        width: 130%;
    }

    .centent_box .li_imgs {
        position: absolute;
        top: 0px;
    }

    .centent_box .li_imgs img {
        display: block;
        width: 650px;
        height: 350px;
    }

    #login .centent_box .inputwrap {
        padding-top: 20px;
        width: 550px;
        height: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        top: 0px;
        z-index: 99;
        background: #fff;
        border-radius: 4px;
    }

    #login .centent_box .remember {
        width: 316px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        margin-top: 15px;
    }

    #login .centent_box .rememberwrap {
        display: flex;
        align-items: center;
    }

    #login .centent_box .rememberwrap input {
        margin: 0;
    }

    #login .centent_box .rememberwrap span {
        padding-left: 5px;
    }

    #login .centent_box .forgetpwd {
        cursor: pointer;
        color: #df0614;
    }

    #login .centent_box .inputwrap button {
        width: 320px;
        height: 40px;
        border: none;
        font-size: 16px;
        color: #fff;
        background-color: #F16B39;
        margin: 30px 0px 0px 0px;
        border-radius: 5px;
        cursor: pointer;
    }

    #login .centent_box .inputwrap button:hover {
        opacity: 0.9;
    }

    #login .centent_box .inputitem input {
        border: none;
        width: 58%;
        background: #fff;
    }

    #login .centent_box .inputitem ::-webkit-input-placeholder {
        color: #e0e0e0;
    }

    #login .centent_box .inputitem {
        border-radius: 4px;
        width: 316px;
        height: 38px;
        border: 1px solid #b0b0b0;
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-top: 20px;
    }

    #login .centent_box .inputitem img {
        margin: 0 10px;
    }

    #login .centent_box .inputitem span {
        margin-right: 20px;
    }

    #login .modelwrap {
        z-index: 100;
        width: 350px;
        height: 120px;
        border-radius: 5px;
        text-align: center;
        line-height: 120px;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        color: #FFF;
        font-size: 18px;
        display: none;
    }

    #login .modelwrap p {
        margin: 0;
    }

    .footer {
        position: absolute;
        bottom: -30px;
        font-size: 14px;
        color: #A7A7A7;
    }
</style>
<style scoped>
    .ipt-cell {
        width: 58%;
        margin-top: 20px;
    }
    .apply-box{
        position: fixed;
        bottom: 8vh;
        left: 0px;
        width: 100%;
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .apply-hint{
        position: relative;
        text-align: center;
        font-size: 16px;
        padding-bottom: 12px;
        color:#026194;
    }
    .apply-hint::before {
        position: absolute;
        content: "";
        height: 1px;
        top: 40%;
        left: -60px;
        -webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0);
        transform: scaleY(0.5) translateX(-50%) translateZ(0);
        background: #026194;
        width: 100px;
    }

    .apply-hint::after {
        position: absolute;
        content: "";
        height: 1px;
        top: 40%;
        left: 140px;
        -webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0);
        transform: scaleY(0.5) translateX(-50%) translateZ(0);
        background: #026194;
        width: 100px;
    }
    .apply-icon{
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }
    .apply-icon span{
        padding-top: 7px;
    }
</style>
